<template>
	<!-- 根节点view，有且仅有一个 -->
	<view class="index">

		<!-- 轮播图 -->
		<swiper @change="dataChange" class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
			:interval="interval" :duration="duration">
			<swiper-item :key="item" class="swiper-item" v-for="item in bannerList">
				<image :src="item"></image>
			</swiper-item>
		</swiper>

		<!-- 搜索按钮 -->
		<view class="search-wrapper">
			<view class="search-btn">
				<image class="icon" src="../../static/image/3.png">搜美食，菜谱</image>
			</view>

			<!-- 三个指示点 -->
			<view class="controls">
				<view :key="index" class="dot" :class="{active: curActive === index}"
					v-for="(item, index) in bannerList">
				</view>
			</view>
		</view>

		<!-- 优选名厨 -->
		<view>
			<image class="cookPic" src="../../static/image/9.png"></image>
		</view>
		<view>
			<scroll-view class="star-cook" scroll-x="true" enable-flex="true">
				<!-- 引入自己封装的卡片组件 -->
				<!-- <Cookcard v-for="item in cardDataList" :cardData="item"></Cookcard> -->
				<Persincard v-for="personItem in cardDataList" :person="personItem"></Persincard>
				<!-- 下面7行是正常写法 -->
				<!-- <view class="cook-item" v-for="item in cardDataList">
					<image class="img" :src="item.imgUrl"></image>
					<view class="info">
						<view class="title">{{item.title}}</view>
						<uni-rate :value="item.score" size="12"></uni-rate>
					</view>
				</view> -->

				<!-- 下面一大坨是测试死数据 -->
				<!-- <view class="cook-item">
							<image class="img" src="../../static/imgs/man2.jpg"></image>
							<view class="info">
								<view class="title">张三</view>
								<uni-rate value="5" size="12"></uni-rate>
							</view>
						</view>
			
						<view class="cook-item">
							<image class="img" src="../../static/imgs/man1.jpg"></image>
							<view class="info">
								<view class="title">李四</view>
								<uni-rate value="5" size="12"></uni-rate>
							</view>
						</view>
			
						<view class="cook-item">
							<image class="img" src="../../static/imgs/man3.jpg"></image>
							<view class="info">
								<view class="title">王五</view>
								<uni-rate value="5" size="12"></uni-rate>
							</view>
						</view> -->
			</scroll-view>
		</view>
	</view>
</template>

<script>
	// 引入自己的自定义厨师卡片组件cookcard
	// import Cookcard from "@/uni_modules/cookcard/cookcard"
	import Persincard from '../../uni_modules/persincard/persincard.vue'

	export default {
		/* 注册自己编写的厨师卡片组件 */
		components: {
			Persincard
		},
		// components: {
		// 	Cookcard
		// },

		data() {
			return {
				/* 轮播图的四个属性 */
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,

				/* 轮播图的地址数组 */
				bannerList: [
					'../../static/image/banner.png',
					'../../static/image/goods1.jpg',
					'../../static/image/goods2.jpg',
					'../../static/image/goods3.jpg',
					'../../static/image/goods4.png'
				],
				// 当前激活
				curActive: 0,
				//
				cardDataList: [{
						id: 1,
						imgUrl: '../../static/image/man1.jpg',
						title: '小貂蝉',
						size: 14,
						score: 2.3,
						margin: 5
					},
					{
						id: 2,
						imgUrl: '../../static/image/man2.jpg',
						title: '李寻欢',
						size: 14,
						score: 4.7,
						margin: 5
					},
					{
						id: 3,
						imgUrl: '../../static/image/man3.jpg',
						title: '赵子龙',
						size: 14,
						score: 4,
						margin: 5
					},
					{
						id: 4,
						imgUrl: '../../static/image/man2.jpg',
						title: '韩信',
						size: 14,
						score: 4.5,
						margin: 5
					},
					{
						id: 5,
						imgUrl: '../../static/image/man2.jpg',
						title: '刘邦',
						size: 14,
						score: 4.5,
						margin: 5
					}
				]

			}
		},
		onLoad(){},
		onShareAppMessage(res) {
			console.log("分享",res)
			if(res.from === 'button'){
				return{
					title:'',
					path:'/pages/index/index?id=123456',
					imageUrl:'/static/image/good1.jpg'
				}
			}
			return{
				title:'给你一个好网站',
				path:'/pages/index/index?id=123456',
				imageUrl:'/static/image/man1.jpg'
			}
		},
		methods: {
			// 当轮播改变
			dataChange(data) {
				this.curActive = data.detail.current
			},
		}
	}
</script>

<style lang="less">
	.index {
		height: 100%;

		// 轮播的样式
		.swiper {
			.swiper-item {
				width: 100%;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		/* 搜索样式 */
		.search-wrapper {
			height: 40px;
			position: relative;

			.search-btn {
				position: absolute;
				display: flex;
				justify-content: center;
				align-items: center;
				top: -20px;
				margin-left: 50rpx;
				width: 650rpx;
				height: 40px;
				background-color: #FFFFFF;
				border-radius: 25px;
				box-shadow: 2px 2px 5px #ccc;
				font-size: 14px;
				color: #666;

				.icon {
					width: 20rpx;
					height: 20rpx;
					margin: 10rpx;
				}
			}

			// 指示点
			.controls {
				height: 10px;
				display: flex;
				justify-content: center;
				position: absolute;
				top: -35px;
				width: 100%;

				.dot {
					width: 10px;
					height: 10px;
					margin-right: 10px;
					background-color: rgba(0, 0, 0, .5);
					border-radius: 50%;
				}

				.active {
					background-color: #FFFFFF;
				}
			}
		}

		.cookPic {
			padding-left: 150rpx;
			width: 450rpx;
			height: 80rpx;
		}

		// 名厨
		.star-cook {
			display: flex;
			height: 300rpx;

			.cook-item {
				margin: 0 10px;
				display: flex;
				flex-direction: column;
				padding: 10px;
				align-items: center;
				width: 180rpx;
				height: 250rpx;
				background-color: #FFFFFF;
				box-shadow: 2px 2px 5px #ccc;

				image {
					flex: 0 0 160rpx;
					width: 160rpx;
					border-radius: 50%;
					margin-bottom: 10px;
				}

				.info {
					flex: 1;
					font-size: 12px;
					text-align: center;
					width: 100%;

					.title {
						margin-bottom: 5px;
					}

					.rate {
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}

	}
</style>
